<template>
  <el-container>
    <el-header class="main-header">
    <div class="header-content">
      <img src="http://localhost:8080/icon.png" class="nav-logo" />
      <p style="color: chocolate; font-weight: bolder; cursor: pointer" @click="handleXmallClick">Xmall</p>
      <el-button type="primary" plain @click="$router.push('/')">首页</el-button>
      <el-button type="success" plain @click="$router.push('/category')">分类</el-button>
      <el-button type="warning" plain @click="$router.push('/cart')">购物车</el-button>
      <el-button type="danger" plain @click="$router.push('/profile')">我的</el-button>
      <div class="search-container">
        <el-input
          v-model="searchKeyword"
          placeholder="搜索商品"
          clearable
          style="width: 300px"
          @keyup.enter="handleSearch"
          @clear="clearSearch"
        >
          <template #append>
            <el-button :icon="Search" @click="handleSearch" />
          </template>
        </el-input>
      </div>
    </div>
  </el-header>
    <el-main>
      <div id="router-view-container">
        <router-view :key="$route.fullPath"/>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import axios from 'axios';
import { getToken, removeToken } from '@/utils/storage';
import { Search } from '@element-plus/icons-vue';
import { ref } from 'vue';
import { useRouter } from 'vue-router';

export default {
  setup() {
    const router = useRouter();
    const clickCount = ref(0);
let resetTimer = null;
const searchKeyword = ref('');

    const handleSearch = () => {
      if (searchKeyword.value.trim()) {
        router.push({ path: '/', query: { keyword: searchKeyword.value.trim() } });
      } else {
        router.replace({ path: '/' });
      }
    };

    const clearSearch = () => {
      router.replace({ path: '/' });
    },
    handleXmallClick = () => {
      clickCount.value++;
      if (!resetTimer) {
        resetTimer = setTimeout(() => {
          clickCount.value = 0;
          resetTimer = null;
        }, 2000);
      }
      
      if (clickCount.value === 5) {
        window.open('/admin.html#/login', '_blank', 'width=1280,height=720');
        clickCount.value = 0;
        clearTimeout(resetTimer);
        resetTimer = null;
      }
    };

    return {
      searchKeyword,
      Search,
      handleSearch,
      clearSearch,
    handleXmallClick
    };
  },
  computed: {
    isAuthenticated() {
      return !!getToken();
    }
  },
  created() {
    axios.interceptors.request.use(config => {
      // 仅对本地API请求添加认证头
      if (config.url.startsWith('http://localhost:8080')) {
        const token = getToken();
        if (token) {
          config.headers.Authorization = `Bearer ${token}`;
        }
      }
      return config;
    });

    this.$router.beforeEach((to, from, next) => {
      if (to.meta.requiresAuth && !getToken()) {
        next('/profile/login');
      } else {
        next();
      }
    });
  },
  methods: {
    logout() {
      removeToken();
      this.$router.push('/profile/login');
    }
  }
};
</script>

<style scoped>
.main-header {
  padding: 0 20px;
  background: #ffffff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.header-content {
  display: flex;
  align-items: center;
  height: 60px;
  gap: 15px;
}

.nav-logo {
  max-height: 70px;
  margin-right: 10px;
}

#router-view-container {
  min-height: 100vh;
  padding: 20px;
  background: #f5f7fa;
}

.search-container {
  margin-left: auto;
}
</style>
